window.onload = function () {
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];

	// 功能二:动态渲染api区的li选项框的内容
	apiData.forEach(function (v) {
		$(
			"#select-time"
		).innerHTML += `<li data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</li>`;
	});
	// 默认选中第一个2000次
	$("#select-time li")[1].classList.add("active");
	// 默认显示第一个的价格内容
	$("#price-user").innerHTML = `<strong>￥${
		$("#select-time li")[1].dataset.price
	}</strong>
			<span>(约${
				$("#select-time li")[1].dataset.unitprice
			}元/次),仅限企业实名用户</span>`;
	// 功能一:点击给每一个选项框添加激活样式
	$("#select-time li").forEach(function (v, i) {
		console.log(v);
		v.addEventListener("click", function () {
			if (i === 0) {
			} else {
				$("#select-time li").forEach(function (item) {
					item.classList.remove("active");
					// 功能三:渲染api区的价格内容
					$("#price-user").innerHTML = `<strong>￥${v.dataset.price}</strong>
					<span>(约${v.dataset.unitprice}元/次),仅限企业实名用户</span>`;
				});
				v.classList.add("active");
			}
		});
		/*
		//功能四:分别给api导航选项卡添加激活样式
		$("#navlist li").forEach(function (v, i) {
			v.addEventListener("click", function () {
				$("#navlist li").forEach(function (item, index) {
					item.classList.remove("active");
					$("#container-left > div")[index].classList.remove("on");
				});
				v.classList.add("active");
				$("#container-left > div")[i].classList.add("on");
			});
		});

		console.log($("#container-left > div"));
		// 功能五:给每一个导航选项卡设置对应的展示内容
		*/
		// function tab(tabSelector, tabClassname, contSelector, contClassname) {
		// 	$(tabSelector).forEach(function (v, i) {
		// 		v.addEventListener("click", function () {
		// 			$(tabSelector).forEach(function (item, index) {
		// 				item.classList.remove(tabClassname);
		// 				$(contSelector)[index].classList.remove(contClassname);
		// 			});
		// 			v.classList.add(tabClassname);
		// 			$(contSelector)[i].classList.add(contClassname);
		// 		});
		// 	});
		// }
		tab("#navlist li", "active", "#container-left > div", "on");
	});

	//配置
	const config = {
		selector: "#banner-bg", //例：#bannerBg
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#555", //点颜色
		stroke: "0,0,0.8", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
};
